<template>
	<view>
		<uni-nav-bar :fixed="true" :height="60" background-color="#3ACD90" status-bar :border="false" leftWidth="auto">
			<block slot="left">
				<view style="display: flex" class="flex-center">
					<view>
						<view class='flex-chuizhi flex-center'>
							<view class="font-color fbold" style="font-size: 40rpx;">{{ userInfo.real_name }}</view>
							<view class="font-color" style="font-size: 28rpx;">{{ userInfo.phone}}</view>
						</view>
					</view>
					<view style="margin-left:24rpx" @click="gonghaoOpen">
						<uni-icons type="scan" size="40" color="#ffffff" />
					</view>
					<view style="margin-left:24rpx" @click="visitShow">
						<uni-icons type="shop-filled" size="40" color="#ffffff" />
					</view>
					<view style="margin-left:24rpx" @click="noticeview">
						<uni-icons type="notification" size="40" color="#ffffff" />
					</view>

				</view>
			</block>
		</uni-nav-bar>
		<view class="bg-color" style="height:300rpx"></view>
		<view class="center-box mtlr30">
			<view class="mtlr30" >
				<view class="pt30">
					<view class="center-title">{{ userInfo.real_name }}店铺信息</view>
				</view>
				<view class="center-mid">
					
					<view class="flex-chuizhi flex-center">
						<view style="color: #666666;">店铺总数</view>
						<view class="fbold">{{personInfo.activateMerchants + personInfo.newMerchantsCount}}</view>
						<view style="color: #666666;" class="pt30">活跃店铺总数</view>
						<view class="fbold">{{ personInfo.activateMerchants }}</view>
						
						
					</view>
					
					<view >
						<mprogress midValue="活跃店铺占比" :progress="activateMer" width=130 valueColor="#FF6C2C" activeColor="#FF6C2C"></mprogress>
					</view>
					
				</view>
				<view class="vertical-divider" style="margin-top: 30rpx;"></view>
				
				<view class="pt30">
					<button @click="toLinkShop" size="default" type="default"
						style="color:#ffffff;background-color:#3ACD90;font-weight: bold;"
						hover-class="is-hover">查看关联店铺</button>
					
				</view>
			</view>
		</view>
		
		<view class="center-second mtlr30">
			<view class="mtlr30" >
				<view class="pt30" style="display: flex;justify-content: space-between;">
					<view style="font-size: 40rpx;">本月进件信息</view>
					<!-- <view style="display: flex;">
						<view class="fbold" style="color:#3ACD90;font-size: 30rpx;">查看全部</view>
						<uni-icons type="right" color="#3ACD90"></uni-icons>
					</view> -->
				</view>
				<view class="pt30 sell-order">
					<view class="mt30" style="color:#7D7D7D ;">个人进件</view>
					<view class="mt30 fbold" style="font-size: 40rpx;">{{ personInfo.newMerchantsCount }}</view>
				</view>
				
				
			</view>
		</view>
		
		
		<view class="center-second mtlr30">
			<view class="mtlr30" >
				<view class="pt30">
					<view style="font-size: 40rpx;">店铺业绩信息</view>
				</view>
				
				<view class="mt30" style="display: flex;justify-content: space-around;">
					<view class="flex-chuizhi flex-center">
						<view style="color:#7D7D7D ;">店铺总业绩</view>
						<view class="fbold mt30" style="font-size: 36rpx;">{{ personInfo.totalRewardPoints }}</view>
					</view>
					<view class="flex-chuizhi flex-center">
						<view style="color: #7D7D7D;">本月业绩</view>
						<view class="fbold mt30" style="font-size: 36rpx;">{{ personInfo.storeRewardPoints }}</view>
						
					</view>
				</view>
				
				<view class="vertical-divider" style="margin-top: 30rpx;"></view>
				
			</view>
			
			<view class="mtlr30 mt30" >
				<view class="pt30">
					<view class="center-title">历史业绩趋势</view>
				</view>
				<view style="height: 400rpx;">
					<historyzhexian :chartData="chartData"></historyzhexian>
				</view>
				<view class="mt30">
					<view style="display: flex;align-items: center;">
						<view style="color:#666666;font-size: 24rpx;">年度累计（个人）</view>
						<view  class="fbold" style="margin-left: 48rpx;">{{ chartData.personyearmoney}}</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="center-second mtlr30">
			<view class="mtlr30" >
				<view class="pt30" style="display: flex;justify-content: space-between;">
					<view style="font-size: 40rpx;">拜访店铺信息</view>
					<view style="display: flex;" @click="visitListView">
						<view class="fbold" style="color:#3ACD90;font-size: 30rpx;">查看全部</view>
						<uni-icons type="right" color="#3ACD90"></uni-icons>
					</view>
				</view>
				<view class="pt30" style="display: flex;justify-content: space-around;">
					<view class="sell-order">
						<view class="mt30" style="color:#7D7D7D ;">拜访总数</view>
						<view class="mt30 fbold" style="font-size: 40rpx;">{{visitInfo.count}}</view>
					</view>
					
					<view class="sell-order">
						<view class="mt30" style="color:#7D7D7D ;">本月拜访数</view>
						<view class="mt30 fbold" style="font-size: 40rpx;">{{visitInfo.month_count}}</view>
					</view>
					
					<view class="sell-order">
						<view class="mt30" style="color:#7D7D7D ;">本月成交数</view>
						<view class="mt30 fbold" style="font-size: 40rpx;">{{visitInfo.month_deal_count}}</view>
					</view>
					
				</view>
				
				
			</view>
		</view>
		<view style="margin-top: 300rpx;width: 1rpx;height: 1rpx;"></view>
		
		<u-popup :round="10" :show="gonghaoShow" mode="center"  @close="gonghaoClose" @open="gonghaoOpen"
			:customStyle='{
				width:"560rpx",
				height:"700rpx",
				padding:"30rpx"
			}'
			:closeable="true"
			>
		        <view class="flex-center flex-chuizhi">
					<view style="margin-top:50rpx">
						<u--image mode="aspectFit" src="/static/image/code.png" width="450rpx" height="450rpx" radius=10 ></u--image>
					</view>
		            <view style="color:#7D7D7D;font-size:28rpx">我的工号</view>
					<view class="flex-center" style="display: flex;">
						<view class="fbold" style="font-size:48rpx;margin-left:80rpx">101924</view>
						<view style="margin-left:20rpx;color:#3ACD90">复制</view>
					</view>
					<view>
						<u-button @click="saveImg" color="#3ACD90" text="保存工号码" :hairline="true"></u-button>
					</view>
		        </view>
		</u-popup>
		
		
		<visitShopForm ref="childRef"></visitShopForm>

	</view>
	
</template>

<script>
	
	import historyzhexian from '@/components/historyzhexian.vue'
	import mprogress from '@/components/m-progress/mprogress.vue'
	import visitShopForm from '@/components/visitShopForm.vue'
	import {
		targetInfo,
		targetEcharts,
		dataDetail
	} from "@/common/apis/other.js"
	
	import dayjs from 'dayjs';
	
	
	
	
	
	export default {
		components:{
			mprogress,
			historyzhexian,
			visitShopForm
			
		},
		data() {
			return {
				userInfo : uni.getStorageSync('userinfo'),
				gonghaoShow:false,
				chartData:{},
				personInfo:{},
				visitInfo:{}
				
				
			}
		},
		computed:{
			activateMer(){
        let total = this.personInfo.activateMerchants + this.personInfo.newMerchantsCount
				return Math.floor(this.personInfo.activateMerchants / total * 100)
			}
		},
		onLoad() {
			// 获取本月的第一天
			const startOfMonth = dayjs().startOf('month').format('YYYY/MM/DD');
			
			// 获取本月的最后一天
			const endOfMonth = dayjs().endOf('month').format('YYYY/MM/DD');
			
			// 构建完整的日期范围字符串
			const dateRange = `${startOfMonth}-${endOfMonth}`;
			
			targetEcharts().then(res=>{
				console.log(res)
				let data = res.data
				
				
				// 提取数据
				const personAmount = data.person.amount.map(Number);
				
				// 构建 categories，去掉年份部分，只保留月份部分
				const categories = data.person.date.map(date => date.split('-')[1]);
			
				// 构建 series
				const series = [
				  
				  {
				    name: "个人",
				    data: personAmount
				  }
				];
				
				// 构建最终的 charts 对象
				this.chartData = {
				  categories: categories,
				  series: series,
				  personyearmoney: data.person.total
				};
				
			})
			
			dataDetail().then( res => {
				console.log('resssss',res)
				if(res.status == 200){
					this.personInfo = res.data.person
					this.visitInfo = res.data.person.visit
				}else{
					uni.showToast({
						title: '获取信息失败',
						duration: 2000
					});
				}
			})
			
		},
		methods: {
			toLinkShop(){
				this.$Router.push({
					path: '/pages/other/linkshop'
				})
			},
			gonghaoClose(){
				this.gonghaoShow = false
			},
			gonghaoOpen(){
				this.gonghaoShow = true
			},
			saveImg(){
				uni.saveImageToPhotosAlbum({
					filePath: '/static/image/four.png',
					success: function () {
						console.log('save success');
					}
				});
			},
			visitShow() {
			    this.$refs.childRef.toggle();
			},
			noticeview(){
				this.$Router.push({
					path: '/pages/other/notice'
				})
			},
			visitListView(){
				this.$Router.push({
					path: '/pages/other/visitlist'
				})
			}
			
		}
	}
</script>

<style scoped>
.center-box{
	height: 100%;
	background-color: #ffffff;
	margin-top: -270rpx;
	border-radius: 20rpx;
	padding-bottom: 80rpx;
	
}
.center-title{
	font-size: 40rpx;
	font-weight: bold;
}

.center-mid{
	display: flex; 

	justify-content: space-between;
	align-items: center;
}
.vertical-divider {
  width: 100%; 
  height: 2rpx; 
  background-color: #ccc; 

}

.center-second{
	margin-top: 20rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding-bottom: 40rpx;
}
.sell-order{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.orderOne{
	color:#FE3837
}

.orderTwo{
	color:#A84A07
}

.orderThree{
	color:#006527
}
.numSize{
	font-size:50rpx
}
.popup-content {
	background-color: #fff;
	width: 600rpx;
	border-radius: 20rpx;
}
</style>